; (function () {
    //做rem适配
  function setFont() {
    //获取浏览器宽度
    let htmlWidth = document.querySelector('html').clientWidth
    //页面宽度限定在1024--1920之间
    if (htmlWidth < 1024) htmlWidth = 1024;
    if (htmlWidth > 1920) htmlWidth = 1920;
    //设置字体大小
    let fontSize = htmlWidth / 80 + 'px'
    //fontsize加给html标签
    document.querySelector('html').style.fontSize = fontSize
  }
  // //上来自执行,页面尺寸变化fontsize变化
  setFont()
  //页面宽度变化
  window.onresize = function () {
        setFont()
  }
})();

let data = [];
let a = [];
let b = [];
let c = [];
function render() {
    a = []
    b = []
    c = []
    $.each(data, function (index) {
        a.push(data[index].username)
        b.push(data[index].score)
        c.push(data[index].salary)
   })
}

  //添加点击事件
; (function () {
    $('button').on('click', function () {
      data.push({username: $('.inp1').val(), score: $('.inp2').val(), salary:$('.inp3').val()}) 
        let str = `<tr>
            <td>${ $('.inp1').val()}</td>
            <td>${ $('.inp2').val()}</td>
            <td>${ $('.inp3').val()}</td>
        </tr>`
        $('tbody').append(str)
        $('.inp1').val('')
        $('.inp2').val('')
        $('.inp3').val('')
        render()
        createChart()
    })
    
})();

function createChart() {

    let myChart1 = echarts.init($('.top')[0])
    let label = a
    let value = b
    
    let option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255,255,255,0)' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
            },
          },
        title:{
            text:'评分'
        },
        grid: {
            top: 100,
            containLabel: true
        },
       
        xAxis: [{
            type: "category",
            boundaryGap: false,
            axisLabel: {
                formatter: '{value}',
                fontSize:14,
                margin:20,
                textStyle: {
                    color: "#000"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "#243753"
                }
            },
            splitLine: {
                show:false,
              
            },
            axisTick:{
                show:false
            },
            data: label
        }],
        yAxis: [
            {
                boundaryGap:false,
                type: "value",
                axisLabel: {
                    textStyle: {
                        color: "#000"
                    }
                },
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    lineHeight: 40
                },
                splitLine: {
                    show:false,
                   
                },
                axisLine: {
                    show: true,
                    lineStyle:{
                        color:"#283352"
                    }
                },
                axisTick: {
                    show: false
                }
            }
        ],
        series: [{
            name: "评分",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle:{
                color:'#19a3df',
                borderColor:"#a3c8d8"
            },
            lineStyle: {
                normal: {
                    width:6,
                    color: '#00d5f6',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00d5f6' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0596d8' // 100% 处的颜色
                    }], false),
                }
            },
            data: value
        }]
    };
    myChart1.setOption(option1)
   let  myChart2 = echarts.init($('.bottom')[0])
   let countData = c
   let labelData = a
   let option2 = {
    title:{
        text:'薪资'
    },
    grid: {
        top: 100,
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        color: '#000',
        data: labelData,
        axisLabel: {
            margin: 20,
            color: '#000',
            textStyle: {
                fontSize: 14
            },
        },
        axisLine: {
            lineStyle: {
                color: '#08175b',
            }
        },
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        min: 0,
        axisLabel: {
            color: '#000',
            textStyle: {
                fontSize: 14
            },
        },
        axisLine: {
            lineStyle: {
                color: '#08175b',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show:false
        }
    }],
    series: [{
        name: '薪资',
        type: 'bar',
        data: countData,
        barWidth: '17px',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00d5f6' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#0596d8' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 0, 0],
            }
        },
        label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold',
            position: 'top',
            color: '#00d5f6',
        }
    }]
};
    myChart2.setOption(option2)
 
}

